.fade {
  &-leave {
    &-to {
      opacity: 0;
    }

    &-active {
      position: absolute;
      z-index: 1;
      width: 100%;
      transition: opacity 0.5s 0.2s;
    }
  }
}

.fade-right {
  &-enter-to,
  &-leave-from {
    opacity: 1;
    transform: translateX(0);
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }

  &-enter-active,
  &-leave-active {
    transition:
      opacity 0.5s,
      transform 0.5s;
  }
}
